<template>
    <el-menu
      :default-active="'/index'"
      router
      mode="horizontal"
      class="nav-title"
      background-color="white"
      text-color="#222"
      active-text-color="red"
      style="min-width:100%">
      <!-- <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item> -->
      <img src="../../assets/huawen.png">

      <!-- <i class="el-icon-user-solid" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i> -->
      <span id="title">学生管理系统</span>
      <el-button icon="el-icon-switch-button" class="loginout" type="danger" size="small" @click="loginOut">注销</el-button>
      <a href="#">你好{{this.$store.state.user.roleName}}！{{this.$store.state.user.userName+'-'+this.$store.state.user.nickName}}</a>
    </el-menu>
</template>

<script>
export default {
  name: 'NavMenu',
  data () {
    return {
      navList: [
        {name: '/index', navItem: '首页'}
        // {name: '/userManagement', navItem: '用户管理'},
        // {name: '/library', navItem: ''},
        // {name: '/admin', navItem: '个人中心'}
      ]
    }
  },
  methods: {
    loginOut () {
      var count = this.$store.state.count
      if (count === 0) {
        this.$store.commit('calculateOnline', count)
      } else {
        count -= 1
        this.$store.commit('calculateOnline', count)
      }
      this.$store.commit('loginOut')
      this.$router.replace('/login')
    }
  }
}
</script>
<style>
.nav-title{
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
}
.nav-title img{
  height: 59px;
  width: 100px;
}
.nav-title #title{
  margin-left: 30%;
  margin-right: auto;
  font-size: 35px;
  font-weight: bold;
}
.nav-title .loginout{

}
.nav-title a{
  margin-left: 1%;
  text-decoration: none;
  color: white;
}
</style>
<style scoped>

  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }
</style>
